google-maps-js-api-loader

google-maps-js-api-loader

Description

Lightweight JavaScript library that simplifies the process of adding Google Maps JavaScript API to web application.

Example

import GoogleMapsLoader, {
  GoogleMapsLoaderStatus,
} from "google-maps-js-api-loader";

GoogleMapsLoader.setOptions({
  apiKey: API_KEY,
  // ...some other options
});

const unlisten = GoogleMapsLoader.addListener(
  GoogleMapsLoaderStatus.LOADED,
  () => console.log("google.maps is ready")
);

GoogleMapsLoader.completion.then(() => console.log("google.maps is ready"));

await GoogleMapsLoader.load();

API

setOptions

static setOptions(options: GoogleMapsLoaderOptions): void

Loader options should be set before load execution

GoogleMapsLoaderOptions	Description
apiKey	Your API key
version?	The version of the Google Maps JavaScript API to use
libraries?	Array of additional Google Maps JavaScript API libraries to load
language?	The language to use. This affects the names of controls, copyright notices, driving directions, and control labels, as well as the responses to service requests. See the list of supported languages
region?	The region code to use. This alters the map's behavior based on a given country or territory
authReferrerPolicy?	Maps JS customers can configure HTTP Referrer Restrictions in the Cloud Console to limit which URLs are allowed to use a particular API Key. By default, these restrictions can be configured to allow only certain paths to use an API Key. If any URL on the same domain or origin may use the API Key, you can set "origin" to limit the amount of data sent when authorizing requests from the Google Maps JavaScript API. This is available starting in version 3.46. When this parameter is specified and HTTP Referrer Restrictions are enabled on Cloud Console, Google Maps JavaScript API will only be able to load if there is an HTTP Referrer Restriction that matches the current website's domain without a path specified
url?	Use a custom url and path to load the Google Maps API script
nonce?	Adds nonce attribute to the script
async?	Adds async attribute to the script
defer?	Adds defer attribute to the script
retryCount?	Number of retries if script loading fails	2
retryDelay?	Delay between retries	2000

---

load

static load(): Promise<void>

On the first call, it starts loading the Google Maps JavaScript API with the given options

Returns completion

---

status

enum GoogleMapsLoaderStatus {
  NONE, // default value
  LOADING,
  LOADED,
  ERROR,
}

static status: GoogleMapsLoaderStatus

Current status of GoogleMapsLoader

---

completion

static readonly completion: Promise<void>

Promise of loading

Resolves if load is success

Rejects

• if Google Maps JavaScript API was loaded outside of this library
• if no options was set
• if script loading failed

---

addListener

static addListener(
  status: GoogleMapsLoaderStatus.LOADING | GoogleMapsLoaderStatus.LOADED,
  callback: () => void
): () => void;
static addListener(
  status: GoogleMapsLoaderStatus.ERROR,
  callback: (err: ErrorEvent | Error) => void
): () => void;

Starts listening for given status changes and calls the given callback when it does

Returns a function that can be used to remove the listener, which can then be invoked in cleanup logic

---

License

MIT © Krombik